<h6>表格示例</h6>
<div class="table-module">
  <p-table [columns]="dt.cols" [value]="dt.value" [rowHover]="true" [responsive]="true" [resizableColumns]="true"
    [autoLayout]="true" (onRowSelect)="rowSelect($event)" (onRowUnselect)="rowUnselect($event)" [(selection)]="dt.selections">
    <ng-template pTemplate="header" let-columns>
      <tr class="table-thead">
        <th style="width: 30px;">
          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage" let-columns>
      <tr>
        <td class="table-nodata" [attr.colspan]="columns.length + 1">暂无数据</td>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData" *ngIf="rowData !== null" [pContextMenuRow]="rowData">
        <td>
          <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
        </td>
        <td *ngFor="let col of columns" [ngSwitch]="col.field">
          <div *ngSwitchCase="'operate'">
            <p-button label="操作" icon="fa fa-check" iconPos="left"></p-button>
          </div>
          <div *ngIf="col.field !== 'operate'" title="{{rowData[col.field]}}">
            {{rowData[col.field]}}
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>
  <div *ngIf="dt.hasValue()" class="table-paginator">
    <p-paginator [rows]="dt.args.pm.rows" [totalRecords]="dt.args.pm.total" [rowsPerPageOptions]="dt.args.pm.pageList"
      [pageLinkSize]="10" (onPageChange)="dt.onPage($event)"></p-paginator>
    <div class="page-total">
      <span>共<span> {{dt.args.pm.total}} </span>条记录 第
        <span> {{dt.args.pm.page}} </span>/
        <span>{{dt.args.pm.totalPage}} </span>页
      </span>
    </div>
    <div class="page-change">
      <form (ngSubmit)="dt.toPage()">
        <span>
          <span>跳至</span>
          <span>
            <input class="page-input" autocomplete="off" type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="dt.args.pm.toPage">
          </span>
          <span>页</span>
        </span>
        <span style="display: none"><input type="submit"></span>
      </form>
    </div>
  </div>
</div>
<h6>对话框示例</h6>
<button type="text" (click)="showDialog()" pButton icon="pi pi-info-circle" label="Show"></button>
<p-dialog header="对话框" [(visible)]="displayDialog" minWidth="400">
  Content
  <p-footer>
    <p-button label="保存" styleClass="ui-button-save"></p-button>
    <p-button label="取消" styleClass="ui-button-cancel"></p-button>
  </p-footer>
</p-dialog>
